<template>
    <div class="background">
      <p class="title">请上传一张照片</p>
      <div class="wrap">
        <div class="left">
          <el-upload
            class="avatar-uploader"
            action
            :auto-upload="false"
            :show-file-list="false"
            :on-change="changeImg"
            >
            <img v-if="imageUrl" :src="imageUrl" class="avatar">
            <div v-else class="tip">
              <i  class="el-icon-plus avatar-uploader-icon"></i>
              <span class="word">上传人脸照片</span>            
            </div>
          </el-upload>
        <el-button class="sub-btn" type="primary" v-loading.fullscreen.lock="fullscreenLoading" @click="submit">提交</el-button>
        </div>
        <ul class="right">
          <li>
            <img :src="src1" alt="">
          <el-progress class="progress" :status="status[0]" :text-inside="true" :stroke-width="26" :percentage="confidence1"></el-progress>
          </li>
          <li>
            <img :src="src2" alt="">
          <el-progress class="progress" :status="status[1]" :text-inside="true" :stroke-width="26" :percentage="confidence2"></el-progress>

          </li> 
          <li>
            <img :src="src3" alt="">
          <el-progress class="progress" :status="status[2]" :text-inside="true" :stroke-width="26" :percentage="confidence3"></el-progress>

          </li> 
        </ul> 
      </div>
             
    </div>
</template>
<script>
export default {
  name: 'many',
  data() {
    return {
      imageUrl: '',
      param:{},
      file:"",
      src1:"",
      src2:"",      
      src3:"",
      confidence1:0,
      confidence2:0,
      confidence3:0,
      status:[], 
      fullscreenLoading: false    
    }
  },
  methods:{
    changeImg(file, fileList){
        this.imageUrl = URL.createObjectURL(file.raw);
         const isJPG = file.raw.type === "image/jpeg";
        const isPNG = file.raw.type === "image/png";
        if (!(isJPG || isPNG)) {
          this.$message({
            type: "warning",
            message: "请选择格式为jpeg或png格式的文件",
            duration: 1000
          });
          return false;
        }else{
          this.file = file.raw
        }

    },
    submit(){
     const loading = this.$loading({
          lock: true,
          text: 'Loading',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        });
      this.param = new FormData();
      this.param.append("image1",this.file)
     this.$axios({
                method:'post',
                url:'http://192.168.50.102:8081/postOvn',
                data:this.param
            }).then((res) =>{          //这里使用了ES6的语法
                console.log(res)       //请求成功返回的数据
                 loading.close();       // 请求成功，loading关闭
                this.confidence = Math.round(res.data.confidence * 100)
                 this.src1 = "data:image/png;base64,"+res.data.base64[0]
                 this.src2 = "data:image/png;base64,"+res.data.base64[1]
                 this.src3 = "data:image/png;base64,"+res.data.base64[2]
                 this.confidence1 =  Math.round(res.data.confidence[0] * 100)
                 this.confidence2 =  Math.round(res.data.confidence[1] * 100)
                 this.confidence3 =  Math.round(res.data.confidence[2] * 100)
                 res.data.confidence.forEach((item,index)=>{
                   if(item >=0.9){
                     this.status.push("success")
                   }else if(item >=0.7){
                     this.status.push("primary")
                   }else{
                     this.status.push("warning")
                   }
                 })
            }).catch((error) =>{
                console.log(error)       //请求失败返回的数据
            })
    }
  }
  
}
</script>
<style scoped>
.background{
  padding-top: 80px;
}
ul{
  list-style: none;
}
.title{
    width: 100%;
    text-align: center;
    font-size: 26px;
  }
  .wrap{
    width: 75%;
    margin: 0 auto;
    overflow: hidden;
    padding-top: 30px
  }
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .tip{
    width: 178px;
    height: 123px;
    text-align: center;
    background: #fff;
    padding-top: 55px;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    display: block
    
  }
  .avatar {
    width: 178px;
    height: 178px;
    /* display: block; */
  }
  .right{
    float: right;
    margin: 0
  }
  .right li{
    float: left;
    width: 178px;
    height: 178px;
    text-align: center;
    background: #fff;
    margin-right:15px 
  }
   .right li img{
     width: 100%;
     height: 100%;
     display: inline-block
   }
  .left{
    float: left;
  }
  .progress{
    margin-top: 25px;
  }
  .sub-btn{
    width: 100%;
    margin-top: 20px
  }
  .tip .word{
    display: inline-block;
    margin-top: 15px;
    color: #666;
  }
</style>